<template>
  <div class="result">
    <div v-if="!showArray.showLoading">
      <!-- 成功内容 -->
      <div v-if="showArray.showResult">
        <div> <van-icon name="checked" /></div>
        <div class="result-title">
          支付成功
        </div>
        <div><van-button type="success" size="large" @click="success">下载app</van-button></div>
      </div>
      <!-- 失败内容 -->
      <div v-else>
        <div>
          <van-icon name="clear" />
        </div>
        <div class="result-title">
          支付失败
        </div>
        <div><van-button type="danger" size="large" @click="backPay">{{ showArray.title }}</van-button></div>
      </div>
    </div>
    <!-- loading -->
    <div class="loading" v-else>
      <van-loading color="#0094ff" size="48" vertical>加载中...</van-loading>
    </div>
  </div>
</template>
<script  setup>
/* eslint-disable*/
import { useRouter, useRoute } from 'vue-router'
import { reactive, onBeforeUnmount, ref, onMounted } from 'vue'
import api from '../api/index'
import { Base64 } from 'js-base64';
const router = useRouter()
// loading
const showArray = reactive({
  showLoading: true,
  showResult: true,
  title: '重新支付', //不存在重新支付逻辑了
  isReturn: false
})
const route = useRoute()
let time = ref(null)
const urlController = (url) => {
  var _url = url.split('?')[1]
  if (!_url) {
    return {}
  }
  var windowHref = _url.split('&')
  var obj = {}
  for (var i = 0; i < windowHref.length; i++) {
    var arr = windowHref[i].split('=')
    obj[arr[0]] = arr[1]
  }
  return obj
}
let outTradeNo, amount, phoneNumber, type
if (!route.query.outTradeNo) {
  const obj = urlController(location.href)
  outTradeNo = obj.outTradeNo
  amount = obj.amount
  phoneNumber = obj.phoneNumber
} else {
  outTradeNo = route.query.outTradeNo
  amount = route.query.amount
  phoneNumber = route.query.phoneNumber
}
onMounted(()=>{
    time = setInterval(() => {
      getTradeNosTatus()
    }, 5000)
})
// 获取当前订单的状态
const getTradeNosTatus = () => {
  showArray.showLoading = true
  api.get('getOutTradeNoStaus', { outTradeNo: outTradeNo, type: type }).then(res => {
    showArray.showLoading = false
    if (res.code === 200) {
      const { code, trade_status } = res.data || {}
      if(trade_status *1 ===1){
        clearInterval(time)
      }
      wxOption(code, trade_status)
    } else {
      showArray.showResult = false
      showArray.title = '返回'
      showArray.isReturn = true
    }
  })
}
const wxOption = (code, trade_status) => {
  if (trade_status * 1 === 1) {
    // 成功
    showArray.showResult = true
  } else {
    // 交失败
    showArray.showResult = false
    showArray.title = '返回'
    showArray.isReturn = true
  }
}
onBeforeUnmount(() => {
  // time = null
  clearInterval(time)
})
const backPay = () => {
  // 无论那种情况、失败就重新生成订单
  const code = localStorage.getItem("code") || '';
  const advert= localStorage.getItem("advert") || '';
  const other=  localStorage.getItem("other") || '';
  const phoneNumber= Base64.encode(localStorage.getItem("phoneNumber")) || '';
  const operation =localStorage.getItem("operation");
  const route = localStorage.getItem('route').split('#/')[1] || '';
  console.log(route)
  router.push({
      path: `/${route}` ,
      query: {
        code: code,
        advert: advert,
        other:other,
        phone: phoneNumber,
        operation:operation
      }
    })
}

const success = () => {
  location.href ='https://www.qhdyywlkj.com/download/app.html'
}
</script>
<style scoped lang="scss">
.result {
  font-size: .12rem;
  overflow: hidden;
  padding: .2rem;

  /deep/.van-icon-checked {
    color: #07c160;
    font-size: .24rem;
    margin-bottom: .10rem;
  }

  /deep/.van-icon-clear {
    color: #ee0a24;
    font-size: .24rem;
    margin-bottom: .10rem;
  }

  &-title {
    margin-bottom: .1rem;
  }

  .loading {
    width: 100%;
    height: 100%;

    /deep/.van-loading {
      margin-top: 40%;
    }
  }
}
</style>
